import { useCallback } from 'react'
import './chatItem.scss'
type chatItemProp = {
  direction: 'right' | 'left'
  imgSrc: string
  message: string
  realname: string
}
const ChatItem = (props: chatItemProp) => {
  const { direction, imgSrc, message, realname } = props
  const test = useCallback(() => {
    console.log('zz')
  }, [imgSrc])
  return (
    <div className="chats" style={{ textAlign: direction }}>
      <div className="realname">{realname}</div>
      <div className="chatItem" style={{ backgroundColor: direction === 'left' ? '#e8e8e8' : '#a3bef4' }}>
        <span>{message}</span>
        <div className={direction === 'left' ? 'chatItem-pop-left' : 'chatItem-pop-right'}></div>
        <div className="chatItem-img" style={direction === 'left' ? { left: '-45px' } : { right: '-45px' }}>
          <img onClick={test} src={imgSrc} alt="头像" width="32" height="32" />
        </div>
      </div>
    </div>
  )
}
export default ChatItem
